/**
 * 此配置用来打包vue项目
 */
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
console.log(path.resolve(__dirname, "build"), "打包输出的位置");
console.log(path.resolve(__dirname, "./build"), "打包输出的位置");
console.log(path.join(__dirname, "./build"), "join打包输出的位置");
console.log(path.resolve(__dirname, "index.html"), "模板文件位置");
module.exports = {
  mode: "development", // development  production
  entry: "./src/js/main.js", // 入口文件
  output: {
    path: path.resolve(__dirname, "build"), // 决定出口文件在哪里
    filename: "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../"
            }
          },
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /(\.png|\.jpg|\.svg)/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 3 * 1024, // 3* 1024b = 3kb
              name: "img/[name].[ext]"
            }
          }
        ]
      },
      {
        // 如果是.vue文件，使用如下的loader
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      // [name], [hash] 是占位符
      // name: 表示入口文件的名称
      // hash: 一串随机值，是用于区别于本次打包与其它打包的过程。由于源文件有变化，则每次打包时hash都不同
      filename: "css/[name]-[hash].css"
    }),
    new HtmlWebpackPlugin({
      // 打包输出HTML
      filename: "index.html",
      template: path.resolve(__dirname, "index.html") // 指定模块的位置
    }),
    new VueLoaderPlugin()
  ]
};
